<template>
  <div>
    <h3>评论</h3>
    <div style="display: flex">
      <div>
        <el-avatar :size="40" :src="user?.avatar" @error="errorHandler">
          <span>{{ user?.nickname }}</span>
        </el-avatar>
      </div>
      <div>
        <div>
          <el-input
            v-model="review.content"
            maxlength="888"
            placeholder="输入评论"
            show-word-limit
            type="textarea"
            class="inp"
          />
          <div style="display: flex; width: 100%; justify-content: flex-end">
            <div style="padding-top: 5px">
              <V3Emoji
                :disable-group="disableGroup"
                @click-emoji="appendText"
                :options-name="optionsName"
                :recent="true"
                :fulldata="true"
                :custom-size="customSize"
              >
                <button class="btn1">
                  <img
                    :src="emoji"
                    alt=""
                    style="width: 16px; height: 16px; margin-right: 3px"
                  />表情
                </button>
              </V3Emoji>
            </div>
            <div style="padding-top: 10px">
              <button>
                <span class="box" @click="submit"> 发表 </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <h3>全部评论</h3>
    <div v-for="review of props.dataList" :key="review.id" style="margin-bottom: 40px">
      <div style="display: flex; width: 100%; justify-content: space-between">
        <div style="display: flex" @click="toUser(review.buser?.id)">
          <el-avatar :size="40" :src="review.buser?.avatar" @error="true">
            <span>{{ review.buser?.nickname }}</span>
          </el-avatar>
          <div style="margin-left: 20px">{{ review.buser?.nickname }}</div>
        </div>
        <div style="color: #787878; font-size: 14px">
          {{ titleUtil.formatRelativeTime(review.createTime) }}
        </div>
      </div>
      <div style="margin-left: 60px">
        <p>{{ review.reviewContent }}</p>
      </div>
      <div class="review" @click="toReview(review.id)">
        <ChatDotSquare style="width: 18px; height: 18px; margin-right: 4px" />
        <div style="font-size: 14px">回复</div>
      </div>
      <div style="margin-left: 50px; margin-top: 5px" v-if="review.id === parentId ? true : false">
        <el-input
          v-model="creview.content"
          maxlength="888"
          placeholder="输入评论"
          show-word-limit
          type="textarea"
          style="width: calc(100% - 30px)"
          class="inp"
        />
        <div style="display: flex; width: 100%; justify-content: flex-end">
          <div style="padding-top: 5px">
            <V3Emoji
              :disable-group="disableGroup"
              @click-emoji="appendText"
              :options-name="optionsName"
              :recent="true"
              :fulldata="true"
              :custom-size="customSize"
            >
              <button class="btn1">
                <img :src="emoji" alt="" style="width: 16px; height: 16px; margin-right: 3px" />表情
              </button>
            </V3Emoji>
          </div>
          <div style="padding-top: 10px">
            <button>
              <span class="box" @click="submitChild(review.id)"> 发表 </span>
            </button>
          </div>
        </div>
      </div>
      <div class="creview" v-if="review?.list.length <= 0 ? false : true">
        <div v-for="creview of review.list" :key="creview.id">
          <div style="display: flex; width: 100%; justify-content: space-between">
            <div style="display: flex" @click="toUser(creview.buser?.id)">
              <el-avatar :size="40" :src="creview.buser?.avatar" @error="true">
                <span>{{ creview.buser?.nickname }}</span>
              </el-avatar>
              <div style="margin-left: 20px">{{ creview.buser?.nickname }}</div>
            </div>
            <div style="color: #787878; font-size: 14px">
              {{ titleUtil.formatRelativeTime(creview.createTime) }}
            </div>
          </div>
          <div style="margin-left: 60px">
            <p>{{ creview.reviewContent }}</p>
          </div>
          <div class="review" @click="toReview(creview.id)">
            <ChatDotSquare style="width: 18px; height: 18px; margin-right: 4px" />
            <div style="font-size: 14px">回复</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
import emoji from '@/assets/img/emoji.png'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import titleUtil from '@/util/titleUtil'
import { useRouter } from 'vue-router'

const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  },
  contentId: {
    type: Number,
    default: null
  }
})
const router = useRouter()
const emit = defineEmits(['refresh'])

const customSize = {
  'V3Emoji-width': '400px',
  'V3Emoji-height': '20rem',
  'V3Emoji-fontSize': '16px'
}

const review = ref({
  content: '',
  contentId: null,
  prentId: null
})

const creview = ref({
  content: '',
  contentId: null,
  prentId: null
})

const parentId = ref(null)

const user = JSON.parse(localStorage.getItem('user'))

const appendText = (val) => {
  console.log(val)
  review.value.content = review.value.content + val.emoji
}
const toUser = (id) => {
  router.push({ name: 'UserPage', params: { userId: id } })
}

const toReview = (id) => {
  if (parentId.value === null) {
    parentId.value = id
  } else {
    parentId.value = null
    creview.value.content = ''
  }
}

const submitChild = (id) => {
  console.log('获取的id', id)

  creview.value.prentId = id
  creview.value.contentId = props.contentId
  submitForm(creview.value)
}
const submit = () => {
  review.value.contentId = props.contentId
  submitForm(review.value)
}

const submitForm = (form) => {
  request
    .post('/user/review/add', form)
    .then((res) => {
      console.log('获取成功：', res)
      emit('refresh')
      review.value.content = ''
      review.value.parendId = null
      creview.value.content = ''
      creview.value.prentId = null
      ElNotification.success('发表成功')
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
</script>

<style lang="scss" scoped>
.inp {
  width: 700px;
  margin-left: 10px;
}
.btn1 {
  background: none;
  border: none;
  padding: 5px;
  width: 80px;
  height: 40px;
}
.review {
  display: flex;
  color: #787878;
  margin-left: 60px;
  margin-top: 10px;
  &:hover {
    cursor: pointer;
    color: #12d0ff;
  }
}
.creview {
  margin-left: 50px;
  margin-top: 20px;
  background: #eee;
  padding: 10px;
}
.creview > div {
  margin-bottom: 40px;
}

.creview > div:last-child {
  margin-bottom: 0;
}

.box {
  width: 60px;
  height: auto;
  float: left;
  transition: 0.5s linear;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  margin: 0 5px;
  background: transparent;
  text-transform: uppercase;
}

.box:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  box-sizing: border-box;
  transform: translateX(100%);
}

.box:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  box-sizing: border-box;
  transform: translateX(-100%);
}

.box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.box:hover:before {
  border-color: #676eff;
  height: 100%;
  transform: translateX(0);
  transition:
    0.3s transform linear,
    0.3s height linear 0.3s;
}

.box:hover:after {
  border-color: #84caf6;
  height: 100%;
  transform: translateX(0);
  transition:
    0.3s transform linear,
    0.3s height linear 0.5s;
}

button {
  color: black;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  background: transparent;
}
</style>
